<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>精确匹配根路径</title>
	<!--引入Vue库-->
	<script src="vue.js"></script>
	<script src="vue-router.js"></script>
</head>
<body>	
<div id="app">
    <p>
      <router-link to="/" exact>主页</router-link>
      <router-link to="/login">登录</router-link>
      <router-link to="/register">注册</router-link>
      <router-link to="/*">不存在的链接</router-link>
    </p>
    <router-view></router-view>
</div>
<script>
    const Home = { template: '<div>打开网站主页</div>' }
    const Login = { template: '<div>打开登录页面</div>' }
    const Register = { template: '<div>打开注册页面</div>' }
    const NotFound = {template:'<div>not found</div>'}
    const routes = [
        { path: '/', component: Home },
        { path: '/login', component: Login },
        { path: '/register', component: Register },
        { path: '*', redirect: "/"},
      ]
    const router = new VueRouter({
          routes 
        })
    const vm= new Vue({
          el:'#app',
          router
        })
</script>
</body>
</html>
